<template>
  <el-dialog
    :visible.sync="visible"
    title="分险措施"
    top="30px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <button type="button" class="btn btn-outline-primary mb-3" @click="onCondEdit()">
      添加风控措施
    </button>

    <div class="row font-weight-bold border-bottom border-top">
      <div class="col-3">
        <div class="py-2">风控措施</div>
      </div>
      <div class="col-3">
        <div class="py-2">措施方案</div>
      </div>
      <div class="col-3">
        <div class="py-2">监控指标</div>
      </div>
      <div class="col-3">
        <div class="py-2">操作</div>
      </div>
    </div>
    <div v-loading="loading">
      <div class="row border-bottom" v-for="(cond, key) in productCondition" :key="`cond-${key}`">
        <div class="col-3">
          <div class="p-2">{{ `${key}、${cond.label}` }}</div>
        </div>
        <div class="col-9">
          <div
            class="row border-left"
            style="min-height: 35px"
            v-for="(d, index) in cond.children"
            :key="`cond-detail-${index}`"
            :class="{ 'border-bottom': index < cond.children.length - 1 }"
          >
            <div class="col-4">
              <div class="py-2">{{ d.risk_des }}</div>
            </div>
            <div class="col-4">
              <div class="py-2">{{ d.monitor_des }}</div>
            </div>
            <div class="col-4">
              <button type="button" class="btn btn-sm" @click="onCondEdit(d)">修改</button>
              <button type="button" class="btn btn-sm" @click="onCondDelete(d)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <risk-cond-edit-item-dialog
      :visible.sync="itemVisible"
      :form-data="formData"
      :table-id="tableId"
      :goods-id="goodsId"
      @success="handleSuccess"
    ></risk-cond-edit-item-dialog>
  </el-dialog>
</template>

<script>
import { enumRiskMethod } from '@/credit/plugins/enum'

import RiskCondEditItemDialog from '@/credit/views/province/goods/RiskCondEditItemDialog'

export default {
  components: {
    RiskCondEditItemDialog,
  },
  props: {
    visible: Boolean,
    goodsId: String,
  },
  data() {
    return {
      loading: false,
      productCondition: {},

      tableName: 'industrial_package_risk',
      itemVisible: false,
      formData: {},
      tableId: '',
    }
  },
  computed: {},
  watch: {
    goodsId() {
      this.getData()
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    async getData() {
      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, {
          'industrial_package_id.eq': this.goodsId,
        })
      )
      this.loading = false

      const data = (res && res.data) || []
      const conds = {}
      Object.keys(enumRiskMethod).forEach(key => {
        conds[key] = {
          label: enumRiskMethod[key],
          children: [],
        }
      })

      for (const d of data) {
        conds[d.risk_name].children.push(d)
      }

      this.productCondition = conds
    },
    handleSuccess(res) {
      this.getData()
      this.$emit('success', res)
    },
    onCondEdit(row = {}) {
      this.formData = row
      this.tableId = row.industrial_package_risk_id
      this.itemVisible = true
    },
    onCondDelete(row) {
      this.$utils
        .msgbox({
          message: `确定删除?`,
          type: 'warning',
          beforeClose: () =>
            this.$api.deleteData(this.$serviceName, this.tableName, row.industrial_package_risk_id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
  },
}
</script>

<style lang="scss" scoped></style>
